<!--回复时使用的论坛标签按钮-->
<script setup>
import {toRefs} from "vue";
import {useStore} from "vuex";
import {bbsCodes, CompletionType} from "@/assets/js/autoCompletion";
import {ArrowDown} from "@element-plus/icons-vue";

const props = defineProps({
  data: {type: Object},
})
const emit = defineEmits(["command"])
const store = useStore();
const {data} = toRefs(props)
</script>

<template>
  <!--其他论坛标签按钮-->
  <template v-for="({name, detail, info, param, options, text, paramText}) in bbsCodes">
    <template v-if="param===CompletionType.REQUIRED_PARAM">
      <!--必须提供参数的标签-->
      <el-dropdown v-if="options" class="bbsCodeButton" size="small" trigger="click" @command="$emit('command',$event)">
        <el-tag class="clickable" size="small">
          {{ detail }}
          <el-icon>
            <arrow-down/>
          </el-icon>
        </el-tag>
        <template #dropdown>
          <!--选项-->
          <el-dropdown-menu>
            <template v-for="item in options ">
              <!--选项是对象-->
              <el-dropdown-item v-if="typeof item ==='object'" :command="{code:name,param:item.value}">
                {{ item.label }}
              </el-dropdown-item>
              <!--选项是字符串-->
              <el-dropdown-item v-if="typeof item ==='string'" :command="{code:name,param:item}">
                {{ item }}
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
    <template v-if="param===CompletionType.HAS_PARAM">
      <!--可以提供参数的标签-->
      <el-tag class="bbsCodeButton clickable" size="small" @click="$emit('command',{code:name,param:paramText})">
        {{ detail }}
      </el-tag>
    </template>
    <template v-if="param===CompletionType.NO_PARAM">
      <!--无参数的标签-->
      <el-tag class="bbsCodeButton clickable" size="small" @click="$emit('command',{code:name})">
        {{ detail }}
      </el-tag>
    </template>

  </template>
</template>

<style scoped>
.bbsCodeButton {
  margin-right: 3px;
  margin-left: 0;
}
</style>